<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/pc端页面初始化.css">
    <link rel="stylesheet" href="./css/cart.css">
</head>

<body>
    <!-- 头部引入 -->
    <div class="head"></div>
    <!-- 购物车 -->
    <section class="content">
        <article class="cart">
            <!-- 购物车外框 -->
            <div class="content-center-h">
                <!-- 购物车主体 -->
                <div id="cartFull" class="block">
                    <!-- 购物车商品部分 -->
                    <div class="cart-top">
                        <p class="title">我的购物车</p>
                        <table class="" cellspacing="0">
                            <!--  cellpadding="0"  -->
                            <!-- 表头 -->
                            <thead>
                                <tr>
                                    <th class=" t-l " style="width: 188px; ">
                                        <input type="checkbox " id="select-all " checked name="pro-select " style="display: none; ">
                                        <label class="checkboxCol active " for="select-all ">
                                            <div class="icon-select-col " id="allCheck"><i class="icon-select animate-common "></i></div>
                                        <span>全选</span>
                                        </label>
                                    </th>
                                    <th style="width: 316px" colspan="2">商品名称</th>
                                    <th>数量</th>
                                    <th>单价</th>
                                    <th>状态</th>
                                    <th>操作</th>

                                </tr>
                            </thead>
                            <!-- 表身 -->
                            <tbody>
                                <!-- 第一行 -->
                                <tr>
                                    <td class=" t-l " style="width: 188px; ">
                                        <input type="checkbox " id="select-0 " checked name="sex " style="display: none; ">
                                        <label for="select-0 " class="checkboxCol active ">
                                        <div class="icon-select-col "">
                                            <i class="icon-select animate-common "></i>
                                        </div>
                                        <span></span>
                                    </label>
                                    </td>
                                    <!-- 第2列 -->
                                    <td style="width: 70px; ">
                                        <div class="img-col ">
                                            <img src="https://shop-1256119282.file.myqcloud.com/blackshark/20200731/20200731151055_28.jpg " alt=" ">
                                        </div>
                                    </td>
                                    <!-- 第3列 -->
                                    <td style="width: 246px; ">
                                        <p class="pro-name ">腾讯黑鲨游戏手机3S</p>
                                        <p class="pro-desc ">12GB+256GB,天云黑,官方标配</p>
                                    </td>
                                    <!-- 第4列 -->
                                    <td style="width: 134px; ">
                                        <div class="sel-num ">
                                            <button class="reduce-num " id="reduce0">-</button>
                                            <i class="num ">2</i>
                                            <button class="add-num " id="add0">+</button>
                                        </div>
                                    </td>
                                    <!-- 第5列 -->
                                    <td style="width: 134px; ">￥4299</td>
                                    <td style="width: 134px; ">待付款</td>
                                    <td style="width: 134px; " class="del">
                                        <i class="fa fa-trash-o iconfont icon-lajixiang"></i>
                                    </td>
                                </tr>

                                <tr>
                                    <td class=" t-l " style="width: 188px; ">
                                        <input type="checkbox " id="select-0 " checked name="sex " style="display: none; ">
                                        <label for="select-0 " class="checkboxCol active ">
                                        <div class="icon-select-col ">
                                            <i class="icon-select animate-common "></i>
                                        </div>
                                        <span></span>
                                    </label>
                                    </td>
                                    <!-- 第2列 -->
                                    <td style="width: 70px; ">
                                        <div class="img-col ">
                                            <img src="https://shop-1256119282.file.myqcloud.com/blackshark/20200731/20200731151055_28.jpg " alt=" ">
                                        </div>
                                    </td>
                                    <!-- 第3列 -->
                                    <td style="width: 246px; ">
                                        <p class="pro-name ">腾讯黑鲨游戏手机3S</p>
                                        <p class="pro-desc ">12GB+256GB,天云黑,官方标配</p>
                                    </td>
                                    <!-- 第4列 -->
                                    <td style="width: 134px; ">
                                        <div class="sel-num ">
                                            <button class="reduce-num " id="reduce0">-</button>
                                            <i class="num ">2</i>
                                            <button class="add-num " id="add0">+</button>
                                        </div>
                                    </td>
                                    <!-- 第5列 -->
                                    <td style="width: 134px; ">￥4299</td>
                                    <td style="width: 134px; ">待付款</td>
                                    <td style="width: 134px; " class="del">
                                        <i class="fa fa-trash-o iconfont icon-lajixiang"></i>
                                    </td>
                                </tr>

                            </tbody>

                        </table>

                        <p class="note ">快去结算看看有哪些优惠吧</p>
                    </div>
                    <!-- 购物车点击结算部分 -->
                    <div class="cart-bottom">
                        <!-- 继续购物 -->
                        <div class="cart-bottom-left">
                            <a href="index.html">
                                <i class="iconfont icon-cart fa"></i>
                                <span>继续购物</span>
                            </a>
                        </div>
                        <!-- 点击结算 -->
                        <div class="cart-bottom-right">
                            共<span class="total-num" id="count-all">4</span>件,合计:<span class="total-price">￥13135</span>
                            <div class="btn-l btn-green animate-common animate-duration-ms" id="pay">
                                去结算
                            </div>
                        </div>
                    </div>

                </div>

                <!-- 未购物显示内容 -->
                <!-- <div id="cartEmpty" class="block" style="display: block; margin-bottom: 120px;">
                    <div class="cartNone-col">
                        <p>购物车竟然是空的，快去添加吧</p>
                        <div class="btn-l btn-green animate-common animate-duration-ms" id="goStore">去商城</div>
                    </div>
                </div> -->
            </div>
        </article>
    </section>
    <!-- 尾部信息 -->
    <div class="foot"></div>
</body>

</html>
<script src="./js/jquery-3.2.1.min.js "></script>
<script src="./js/cart.js"></script>
<script>
    $(function() {
        $(".head ").load("import-header-copy.html ")
    })
    $(function() {
        $(".foot ").load("import-foot.html ")
    })
</script>